<template>
  <view class="dailyLimit">
    <u-navbar :title="$t('今日限定')"></u-navbar>
    <view class="dailyLimit-bottom"></view>
    <view class="day">
      <view
        class="dayIiem"
        :class="{ dayIiemActive: weekday === 1 }"
        >{{$t('周一')}}</view
      >
      <view
        class="dayIiem"
        :class="{ dayIiemActive: weekday === 2 }"
        >{{$t('周二')}}</view
      >
      <view
        class="dayIiem"
        :class="{ dayIiemActive: weekday === 3 }"
        >{{$t('周三')}}</view
      >
      <view
        class="dayIiem"
        :class="{ dayIiemActive: weekday === 4 }"
        >{{$t('周四')}}</view
      >
      <view
        class="dayIiem"
        :class="{ dayIiemActive: weekday === 5 }"
        >{{$t('周五')}}</view
      >
      <view
        class="dayIiem"
        :class="{ dayIiemActive: weekday === 6 }"
        >{{$t('周六')}}</view
      >
      <view
        class="dayIiem"
        :class="{ dayIiemActive: weekday === 7 }"
        >{{$t('周日')}}</view
      >
    </view>
    <view class="dailyLimit-list">
      <view
        class="dailyLimit-list-card"
        v-for="(item, idx) in list"
        :key="idx"
        @click="gotoPage(item)">
        <view class="d-l-c-0">
          <view class="d-l-c-0-0">
            <view class="xg">{{$t('限购')}}{{ item.box_limit_num }}{{$t('次')}}</view>
            <view class="end-time">
              {{$t('距结束')}}：
              <u-count-down
                :timestamp="remainingSeconds"
                separator-size="16"
                separator-color="#000000"
                color="#fff"
                font-size="24"
                bg-color="#d30000"
                padding="5"
                class="u-count-down-view"></u-count-down>
            </view>
            <image
              :src="item.blind_box.image"
              class="mhIMg"></image>
          </view>
          <view class="d-l-c-0-1">
            <view class="mz">{{ item.title }}</view>
            <view class="fbt">{{ item.sub_title }}</view>
            <view class="jg">
              <view class="jg-0">
                <!-- 必出现金 -->
                <template v-if="item.type === 1">
                  <text class="labei-money">{{$t('¥')}}</text>
                  <!-- {{ item.blind_box.price }} -->
                  {{ floatInt(item.blind_box.price, 1) }}
                  <text class="labei-text">（{{$t('必出现金')}}）</text>
                </template>
                <!-- 2.聚划算 -->
                <template v-if="item.type === 2">
                  <text class="labei-money">{{$t('¥')}}</text>
                  {{ floatInt(item.source_info.price, 0) }}
                  <text
                    class="labei-text del-text"
                    style="margin-left: 6px; color: #35363b"
                    >{{$t('¥')}}{{ item.source_info.old_price }}</text
                  >
                  <!-- <text class="labei-text">{{ item.v2_type === 1 ? `折扣${item.zhekou}` : `优惠${item.youhuijine}` }}</text> -->
                </template>
                <template v-if="item.type === 3">
                  <text class="labei-money">{{$t('¥')}}</text>
                  {{ floatInt(item.blind_box.price, 0) }}
                  <text class="labei-text">（{{ item.beishu }}{{$t('倍送')}}）</text>
                </template>
                <template v-if="item.type === 4">
                  <text class="labei-money">{{$t('¥')}}</text>
                  {{ floatInt(item.first_beishu) }}
                  <text
                    class="labei-text del-text"
                    style="margin-left: 6px; color: #999999"
                    >{{$t('¥')}}{{ item.source_info.old_price }}</text
                  >
                  <!-- <text class="labei-text">（{{ item.first_num }}抽起购）</text> -->
                </template>
                <template v-if="item.type === 5">
                  <text class="labei-money">{{$t('¥')}}</text>
                  {{ floatInt(item.blind_box.price, 0) }}
                  <text class="labei-text">（{{$t('得')}}{{ item.zsnum }}{{$t('抽')}}）</text>
                </template>
                <template v-if="item.type === 6">
                  <text class="labei-money">{{$t('¥')}}</text>
                  {{ floatInt(item.blind_box.price) }}
                  <text class="labei-text"
                    >（{{$t('买')}}{{ item.buy_num }}{{$t('送')}}{{ item.zsbuy_num }}）</text
                  >
                </template>
              </view>
              <view class="jg-1"
                >{{ item.blind_box.xiaoliang || 0 }}{{$t('人喜欢')}}</view
              >
            </view>
            <view class="payBtn-view">
              <view class="payBtn"></view>
            </view>
          </view>
        </view>
        <view class="d-l-c-1">
          <view
            class="dl-img"
            v-for="(goods, index) in item.blind_box.goods_list.slice(0, 5)"
            :key="index">
            <image
              :src="goods.goods_image"
              mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <view class="purchase-rule">
      <view class="title">{{$t('限购规则')}}</view>
      <view class="item">
        <view class="num">1、</view>
        <view class="text">
          {{$t('每日限购盲盒不同，对应限购次数不同')}}</view
        >
      </view>
      <view class="item">
        <view class="num">2、</view>
        <view class="text">
          {{$t('当日达到限购次数上限时，该盒子不能再购买')}}</view
        >
      </view>
      <view class="item">
        <view class="num">3、</view>
        <view class="text"> {{$t('本活动解释权归平台所有')}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      remainingSeconds: 0, // 今日倒计时
      weekday: 0,
    };
  },
  onLoad() {
    const today = new Date().getDay(); // 获取今天是一周中的第几天（0-6）
    this.weekday = today === 0 ? 7 : today;
  },
  onShow() {
    this.getDayList();
    this.getDayEndTime();
  },
  methods: {
    getDayEndTime() {
      // 获取当前日期和时间
      const now = new Date();

      // 设置目标时间为今天的最后一刻
      const targetTime = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        23,
        59,
        59
      ).getTime();

      // 计算时间差，单位为秒
      const remainingSeconds = Math.floor((targetTime - now.getTime()) / 1000);
      console.log("距离今日结束还剩下 " + remainingSeconds + " 秒");
      this.remainingSeconds = remainingSeconds;
    },
    /* 字符串转小数 */
    floatInt(val, length = 1) {
      let f = parseFloat(val);
      let result = f.toFixed(length);
      return result;
    },
    /*获取列表 */
    getDayList() {
      const today = new Date().getDay(); // 获取今天是一周中的第几天（1-7）
      let userInfo = uni.getStorageSync("user");
      const weekday = today === 0 ? 7 : today;
      uni.showLoading();
      this.$http({
        data: {
          week_day: weekday,
          member_id: userInfo.id || "",
        },
        url: "api/common/get_present_list",
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.list = res.data.data;
            uni.hideLoading();
            // this.go_new_amp_open = true;
          }
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },

    /* 查看详情 */
    gotoPage(params) {
      console.log(params);
      uni.navigateTo({
        url:
          "/pages/home/kaixiang?id=" +
          params.bindboxid +
          "&boxSource=" +
          8 +
          "&zid=" +
          params.id,
      });
      // uni.navigateTo({
      // 	url: '/pages/home/kaixiang?id=' + params.bindboxid + '&music=' + this.muteBgMusic + '&boxSource=' + source + '&zid=' + params.id
      // });
      // uni.navigateTo({
      // 	url: '/pages/home/kaixiang?id=' +  params.bindboxid + '&boxSource=' + 8
      // });
    },
  },
};
</script>
<style>
page {
  background-color: #3b3f43;
}
</style>
<style lang="scss" scoped>
.dailyLimit {
  font-family: "Microsoft Yahei";
  .dailyLimit-bottom {
    width: 100%;
    height: 340rpx;
    // background-image: url("https://cdn.tugaigai.com/5ae1867b-2a32-4307-8d70-4b7c884f87e5.png");
	background-image: url('../../../static/image/day.jpg');
    background-size: 100% 100%;
  }
  .dailyLimit-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #3b3f43;
    padding-top: 10rpx;
    .dailyLimit-list-card {
      margin-bottom: 30rpx;
      padding: 10px 0;
      width: 720rpx;
      background-image: url("https://sjmanghe.com/uploads/20230421/20240119150850.jpg");
      background-size: 100% 100%;
      .d-l-c-0 {
        width: 100%;
        display: flex;
        .d-l-c-0-0 {
          width: 330rpx;
          flex-shrink: 0;
        }
        .d-l-c-0-1 {
          overflow: hidden;
        }
        .xg {
          width: 150rpx;
          height: 45rpx;
          line-height: 45rpx;
          color: #fff;
          padding-left: 15rpx;
          background-color: rgba(1, 1, 3, 0.7);
        }
        .end-time {
          font-size: #000;
          font-weight: bold;
          margin-top: 40rpx;
          /deep/ .u-countdown-time {
            padding: 3rpx;
            font-weight: 400;
          }
        }
        .mhIMg {
          width: 280rpx;
          height: 280rpx;
          margin-top: 20rpx;
        }
        .mz {
          font-size: 40rpx;
          color: #000;
          font-weight: bold;
          margin-top: 34rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .fbt {
          font-size: 24rpx;
          color: #000;
          margin-top: 10rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .jg {
          width: 340rpx;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-top: 100rpx;
          .jg-0 {
            font-size: 40rpx;
            font-weight: bold;
          }
          .jg-1 {
            font-size: 22rpx;
            color: #2c2c2c;
            position: relative;
            top: -4rpx;
            font-family: "NSimSun";
          }
          .labei-money {
            font-size: 26rpx;
          }
          .labei-text {
            font-family: "NSimSun";
            font-size: 19rpx;
          }
        }
        .payBtn-view {
          width: 360rpx;
          height: 120rpx;
          margin-top: 20rpx;
          overflow: hidden;
        }
        .payBtn {
          margin-left: 20rpx;
          width: 320rpx;
          height: 90rpx;
          background-image: url("https://sjmanghe.com/uploads/20230421/20240119150901.png");
          background-size: 100% 100%;
          animation: scaleDraw 5s ease-in-out infinite;
        }
      }
      .d-l-c-1 {
        width: 100%;
        display: flex;
        padding: 0 30rpx;
        // justify-content: space-between;
        column-gap: 8rpx;
        .dl-img {
          width: 120rpx;
          height: 120rpx;
          background-color: rgba(243, 243, 246, 1);
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.day {
  width: 750rpx;
  height: 70rpx;
  // background-color: red;
  display: flex;
  left: 50%;
  justify-content: space-between;
  color: #eab79b;
  font-size: 24rpx;
  align-items: center;
  background: rgb(128, 129, 130);
  background: linear-gradient(
    0deg,
    rgba(128, 129, 130, 1) 0%,
    rgba(0, 0, 0, 1) 99%
  );
  .dayIiem {
    width: calc(750rpx / 7);
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dayIiemActive {
    background: linear-gradient(#a6cbff, #59e8ff);
    color: #000;
  }
}
.purchase-rule {
  width: 100%;
  background-color: #fff;
  padding-bottom: 25rpx;
  .title {
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    background-color: #c7d1db;
    font-size: 38rpx;
    color: #17201f;
    padding: 0 25rpx;
  }
  .item {
    padding: 0 25rpx;
    margin-top: 25rpx;
    display: flex;
    font-size: 24rpx;
  }
}

@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1); /* 开始 为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
.del-text {
  text-decoration: line-through;
}
</style>
